import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import {Link} from 'dva/router';
import {Button,Row,Col,Layout, Menu, Breadcrumb,Select,Icon,Form,Input,Affix,Modal,Pagination,message,Rate} from 'antd';
import reqwest from 'reqwest';
import style from '../../styles/ResetInput.less';
import inStyle from '../../styles/Info.less'
import {numvail,selectvail} from '../../utils/Validator.js'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import {datevali_deta} from '../../utils/Validator.js'
const FormItem = Form.Item;
const Option =Select.Option;
class ClueDetails extends React.Component{
	constructor(props){
		super(props);
		this.state={
			loading:false,
			list:JSON.parse(window.localStorage['clues']),
			contentState:undefined,
			_node:undefined
		}
	}
	handleSubmit(e){
    // console.log(e)
    e.preventDefault();
    let _this=this;
    this.props.form.validateFields((err, values) => {
        console.log(values.name);
// debugger
      if (!err) {
        console.log('Received values of form: ', values);
	      	_this.pacthServer(values)
      }else{
      	console.log(2)
      }
    });
	}
	remarkMount(){
		let _rmNode=JSON.parse(window.localStorage['clues']).remark!=="null"?JSON.parse(window.localStorage['clues']).remark.split('~'):['null'];
		// console.log(_rmNode[0]==='null')
		let _even={unde:"undefined",entityMap:undefined,blocks:[]};
		// debugger
		let _node,_node1;
		let _json;
		// _json=_rmNode[0]===""?'null':undefined
		_node=_rmNode[0]==="null"||_rmNode[0]===""?'null':_rmNode.map((data,index)=>{
			// console.log(200)
			_node1=data[index]===undefined?undefined:JSON.parse(data)
			// console.log(100)
			// if(data===undefined){
			// 	return
			// }
			// contentState.blocks[index]=_node.blocks;
			// console.log(contentState)
			if(data[index]!==undefined){
			// return <p key={index}>
	        {JSON.parse(data).blocks.map((dats,index)=>{
	        	if(_even.unde==="undefined"){
	        		_even.entityMap=JSON.parse(data).entityMap;
	        		// _even.blocks=[]
	        		_even.blocks.push(dats)
	        		_even.unde='1'
	        	}else{
	        		_even.blocks.push(dats)
	        	}
	          // console.log(dats)
	          // return <span key={dats.key} className={`${style.reset_remark}`} >{dats.text}</span>

	        })}
	        // <span style={{textAlign:'right',display:'block'}}>{JSON.parse(data).date}</span>
	      // </p>
      }
		})
		this.setState({contentState:_even})
	}
	componentWillMount(){
		// this.loadserver();
		// let contentState={"entityMap":{},blocks:[]};
		console.log(JSON.parse(window.localStorage['clues']).remark)
		if(JSON.parse(window.localStorage['clues']).remark!==null&&JSON.parse(window.localStorage['clues']).remark!==""){
			this.remarkMount()
		}
		// console.log(JSON.parse(JSON.parse(window.localStorage['clues']).remark))
	}
	pacthServer(params={}){
		this.setState({loading:true});
    const {province, city,area,street} =this.state;
    let _this= this;
    let _date = new Date();
    params.remark.date=datevali_deta(_date);
    params.remark.name=JSON.parse(window.localStorage['setting']).name;
  	reqwest({
      url: window.host+'/api/clues/update_me',
      method: 'post',
      crossOrigin: true,
      data: {
      	id:_this.props.location.query.ims,
        access_token:localStorage['token'],
        clue:{name:params.name,mobile:params.phone,address:params.address,remark:JSON.stringify(params.remark)},
      },
      type: 'json',
    }).then((data) => {
      if(data.status=='success'){
				message.success('更新成功',1,()=>{
					window.location.hash='/app/clues?current='+_this.props.location.query.current;
				})
			}else{
				this.setState({loading:false});
				message.warning(data.msg,1)
			}
    }).fail((err)=>{
    	this.setState({loading:false});
			console.log(2)
		})
  }
  onContentStateChange(contentState){
	  this.setState({
	    contentState
	  });
	}
	render(){
		const formItemLayout = {
      labelCol: { span: 7},
      wrapperCol: { span: 17 },
      style:{minWidth:200}
    };
    const {list} =this.state;
    // const _remark = JSON.parse(list.remark)
  	const {getFieldDecorator}=this.props.form;
		return(
			<Layout >
				<Layout.Content className={`${style.berad}`} >
					<Row>
						<Breadcrumb  className={`${style.blue_dia_none}`}>
							<Breadcrumb.Item ><span className={`${style.blue_dia}`}></span></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div} ${style.bread_div_first}`}><Link to={{pathname:'/app/clues',query:{current:this.props.location.query.current}}}>线索</Link></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div}`}>编辑线索</Breadcrumb.Item>
	       		</Breadcrumb>
	       	</Row>
				</Layout.Content>
				<Layout style={{background:'#fff'}}>
				<Form className={`${inStyle.ncc_left_layout}`} onSubmit={this.handleSubmit.bind(this)} >
					<Row style={{marginTop:26}}>
						<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:17,pull:0}} >
							<FormItem {...formItemLayout} label='手机'>
								{getFieldDecorator('phone',{
									initialValue:list.mobile,
									rules:[{required:true,message:'请输入手机号码',validator:(rule,value,callback)=>{
										numvail(rule,value,callback)
									}}]
								})(
									<Input className={`${style.ncc_reset_input}`} placeholder='手机' />
								)}
							</FormItem>
						</Col>
					</Row>
       		<Row >
						<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:17,pull:0}} >
							<FormItem  {...formItemLayout} label='姓名'>
								{getFieldDecorator('name',{
									initialValue:list.name,
									rules:[{required:true,message:'请输入姓名'}]
								})(
									<Input className={`${style.ncc_reset_input}`} placeholder='姓名' />
								)}
							</FormItem>
						</Col>
					</Row>
					<Row >
						<Col sm={{span :8,pull:0}} className={`${style.reset_col}`} xs={{span:17,pull:0}} >
							<FormItem  {...formItemLayout} label='地址'>
								{getFieldDecorator('address',{
								initialValue:list.address,
									rules:[{required:true,message:'请输入地址'}]
								})(
									<Input className={`${style.ncc_reset_input}`} placeholder='地址' />
								)}
							</FormItem>
						</Col>
						</Row>
					<Row >
						<Col sm={{span :8,pull:0}} className={`${style.reset_col}`} xs={{span:17,pull:0}} >
							<FormItem  {...formItemLayout} label='优先级'>
								{getFieldDecorator('pound',{
									initialValue:undefined,
								})(
									<Rate  count={5}  onChange={(e)=>console.log(e)} allowHalf={false} />
								)}
							</FormItem>
						</Col>
					</Row>

       		<Row>

	       		<Col className={`${style.reset_col}`}  span={8}>
							<FormItem {...formItemLayout} label='备注'>
								{getFieldDecorator('remark',{
									initialValue:list.remark,
								})(
										<Editor onContentStateChange={()=>this.onContentStateChange} contentState={this.state.contentState}  toolbarHidden editorClassName={`${style.reset_editor}`} editorStyle={{fontSize:12,margin:0,height:'auto'}} wrapperStyle={{border:'1px solid #cecece',borderRadius:4,width:360,minHeight:100}} />

								)}
							</FormItem>
						</Col>
       		</Row>
       		<Row>
	       		<Col xl={{offset:3}} lg={{offset:2}} sm={{span :8,pull:0}} xs={{span:17,pull:3}}  >
		       		<div  style={{float:'left'}} >
		       			<FormItem >
			            <Button loading={this.state.loading} htmlType="submit" size='large' type="primary"  >
			              保存
			            </Button>
		          	</FormItem>
		          </div>
		          <div  style={{float:'left',marginLeft:10}} >
		          	<Button size='large'  >
			            <Link to={{pathname:'/app/clues',query:{current:this.props.location.query.current}}}>取消</Link>
			          </Button>
		          </div>
	          </Col>
          </Row>
				</Form>
			</Layout>
			</Layout>
		)
	}
}
       		//<Row>
       	//		<Col span={8}>
					//		<FormItem  {...formItemLayout} label='历史备注'>
     			//			{this.state._node}
     		//			</FormItem>
     		//		</Col>
				//	</Row>
const ClueDetailsForm = Form.create()(ClueDetails);

export default connect()(ClueDetailsForm);
